<template>
  <div>
     <table class="jt-table" border="1" cellspacing="0">
          <tr style="background-color: #cccccc;" v-for="(list,index) in tableList" :key="index">          
            <td  v-if="index==0" style="width:30px;">
              <input type="checkbox" v-model='checked' @click='checkedAll'>
              <span></span>
            </td>
            <template v-if="index==0">
                <td v-for="item in list" :key="item" >{{item}}</td>
            </template>
          </tr>
          <tbody>
              <tr v-for="(list,index) in tableList" :key="index">          
              <td style="width:30px;" v-if="index!=0">
                <input type="checkbox" v-model='checkList' :value="list[0]">
                <span></span>
              </td>
              <template v-if="index!=0">
                  <td v-for="item in list" :key="item" >{{item}}</td>
              </template>
            </tr>
          </tbody>
    </table>
  </div>
</template>
<script>
export default {
  name: 'Table',
  data(){
    return{
      tableHead:[],
      tableList:[],
      checked: false,
      checkList: ['1', '3']
    }
  },
  created(){
    this.generate()
  },
  watch: { //深度 watcher
    'tableList': {
      handler: function(val) {
        if (val.length === this.tableList.length - 1) {
          this.checked = true;
        } else {
          this.checked = false;
        }
      },
      deep: true
    }
  },
  methods:{
    checkedAll() {
      var _this = this;
      if (_this.checked) { //实现反选
        _this.checkList = [];
      } else { //实现全选
        _this.checkList = [];
        _this.tableList.forEach((item)=>{
          _this.checkList.push(item[0])
        }
          
        );
      }
    },
     generate () {
        let data = [['Index', `Data1`, `Data2`, `Data3`]]
        for (let i = 0; i < 15; i++) {
          data.push([
            i+1, 
            parseInt(Date.now() + Math.random() * 10000000).toString(16), 
            parseInt(Date.now() + Math.random() * 10000000).toString(16),
            parseInt(Date.now() + Math.random() * 10000000).toString(16)
          ])
        }
        this.tableHead=data[0];
        this.tableList=data;
        return data
      }
    }
}
</script>

<style scoped lang="scss">
.jt-table{
  border:1px #ffffff solid;
}
.jt-table tbody {
    height: 400px;
    display: block;
    overflow-y: scroll;
}
.jt-table td {
    width:200px;
    height:40px;
    color: rgba(0,0,0,.85);
    font-weight: 500;
    text-align: center;
    background: #fafafa;
}
.jt-table tr {
  display:table;
  table-layout: fixed;
}
.jt-table tbody::-webkit-scrollbar {
  width: 6px;
}
.jt-table tbody::-webkit-scrollbar-thumb {
  background-color: #1890ff;
  border-radius: 5px;
}
.jt-table tbody::-webkit-scrollbar-track {
  background-color: white;
}
.jt-table tbody::-webkit-scrollbar-thumb:hover {
  background-color: #1890ff;
}
.jt-table tbody::-webkit-scrollbar-thumb:active {
  background-color: #1890ff;
}
</style>
